<template>
  <div class="detail-property">
    <tag tag="属性" />
    <p v-if="list.length === 0">暂无相关属性</p>
    <ul v-else class="list">
      <li
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <span class="name">{{ item.name }}:</span>
        <span class="value">{{ item.value }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import Tag from './Tag'
export default {
  name: 'DetailProperty',
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: { Tag }
}
</script>

<style scoped lang="stylus">
.detail-property
  margin 10px
  padding 10px
  background white
  border-radius 10px
  text-align left
  p
    line-height 22px
  .list
    .list-item
      height 20px
      line-height 20px
      display flex
      .name
        width 30%
        text-align right
        padding-right 5px
        box-sizing border-box
        font-weight 700
      .value
        width 69%
</style>
